<template>
  <div class="console">
    <a-layout class="console-body">
      <a-layout-header class="header-content">
        <div class="header-logo">
          <img class="logo" src="../assets/images/data-logo.png" alt />
        </div>
        <div class="header-user">
          <a-dropdown
            :trigger="['hover']"
            @click="e => e.preventDefault()"
            style="minWidth: 100px;height:50px;"
          >
            <div style="display:inline-block">
              <img src="../assets/images/head-img.png" alt />
              <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                {{cname}}
                <a-icon type="down" />
              </a>
            </div>
            <a-menu slot="overlay" class="sys-opts">
              <!-- <a-menu-item key="0" @click="settings">设置</a-menu-item> -->
              <a-menu-item @click="logout" key="1">退出</a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
        <div class="console-name">
          <h1>文本撰写助手</h1>
        </div>
      </a-layout-header>
      <a-layout-content
        class="main-content"
        :style="{width:isleftFullscreen||isrightFullscreen ? '1200px' : '98%'}"
      >
        <div class="content" ref="content">
          <div
            class="left-box"
            :style="{width:isleftFullscreen||isrightFullscreen ? '1200px' : 'calc(50% - 5px)'}"
            v-show="!isrightFullscreen"
          >
            <div class="operation-btn">
              <a-icon @click="leftContentFullscreen" type="fullscreen" />
              <a-icon
                @click="backClick"
                style="margin-left:15px"
                type="rollback"
                v-if="isShowbackBtn"
              />
            </div>
            <div class="tags-header">
              <img src="../assets/images/hotMessage/tags-ico.png" />
              <span @click="tagsClick">我的标签</span>
              <TagsModal
                :tagsVisible="tagsVisible"
                @saveFunc="saveFunc"
                @closeFunc="tagsVisible=false"
              ></TagsModal>
            </div>
            <router-view></router-view>
          </div>
          <div class="resize" title="收缩侧边栏" v-show="!isleftFullscreen&&!isrightFullscreen"></div>
          <div
            class="right-box"
            id="right"
            v-show="!isleftFullscreen"
            :style="{width:isleftFullscreen||isrightFullscreen ? '1200px' : '50%'}"
          >
            <div class="operation-btn">
              <a-icon @click="rightContentFullscreen" type="fullscreen" />
            </div>
            <div>
              <div class="text-header">
                <span>我的文本仓库</span>
              </div>
              <TextList v-if="textVisible" @editText="editText(record)" @addText="addText()"></TextList>
              <Ueditor v-else @ueditorBack="ueditorBack()" :data="id"></Ueditor>
              <FloatBall @onClick="floatClick()"></FloatBall>
            </div>
          </div>
        </div>
      </a-layout-content>
    </a-layout>
    <!-- <UserInform
      :inform-visible="informVisible"
      :inform-data="informData"
      @saveFunc="saveFunc"
      @refreshLabelInput="refreshLabelInput"
      @closeFunc="informVisible=false"
    />-->
  </div>
</template>

<script>
import { outlogin, getUserInfo } from "@/api/login";
import { mapState, mapGetters, mapMutations } from "vuex";
import TextList from "components/configuration/textWarehouse/textList";
import UserInform from "components/configuration/user/userInform";
import TagsModal from "components/configuration/hotMessage/tagsModal";
import Ueditor from "@/components/base/ueditor";
import FloatBall from "@/components/base/floatBall";
export default {
  components: {
    UserInform,
    TextList,
    TagsModal,
    Ueditor,
    FloatBall,
  },
  data() {
    return {
      textVisible: true,
      cname: JSON.parse(localStorage.getItem("userInfo")).cname,
      photo: "",
      collapsed: false,
      isleftFullscreen: false,
      isrightFullscreen: false,
      loginName: "admin",
      informData: {},
      informVisible: false,
      boxWidth: "",
      left: "",
      right: "",
      screenWidth: document.body.clientWidth,
      screenHeight: document.body.clientHeight,
      /*我的标签 */
      tagsVisible: false,
      timer: null,
      id: "",
      flag: true,
    };
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        console.log("val", val);
        console.log("oldVal", oldVal);
        this.routerRedirect();
        this.flag = this.$route.query.flag;
      },
      // 深度观察监听
      deep: true,
    },
    screenWidth(val) {
      if (!this.timer) {
        this.screenWidth = val;
        this.timer = true;
        let that = this;
        console.log("移动距离：", that.moveLen);
        that.boxWidth = document.getElementsByClassName(
          "content"
        )[0].clientWidth;
        var rightDiv = document.getElementById("right");
        rightDiv.style.width = that.boxWidth - that.moveLen - 2 + "px";
        setTimeout(() => {
          that.timer = false;
        }, 400);
      }
    },
  },
  mounted() {
    if (this.$route.query.textVisible !== undefined) {
      this.textVisible = Boolean(parseInt(this.$route.query.textVisible));
    }
    const that = this;
    window.onresize = () => {
      return (() => {
        that.screenHeight = document.body.clientHeight;
        that.screenWidth = document.body.clientWidth;
      })();
    };
    that.dragControllerDiv();
    that.routerRedirect();
  },
  methods: {
    ...mapMutations({
      setBackbtn: "SET_BACKBTN",
    }),
    floatClick() {
      const { href } = this.$router.resolve({
        path: `/materiallibrary/home`,
      });
      window.open(href, "_blank");
    },
    //返回上一级
    backClick() {
      this.$router.back(-1);
      this.setBackbtn(false);
    },
    leftContentFullscreen() {
      this.isleftFullscreen = !this.isleftFullscreen;
    },
    rightContentFullscreen() {
      this.isrightFullscreen = !this.isrightFullscreen;
    },
    //路由重定向
    routerRedirect() {
      if (this.$route.path === "/console/" || this.$route.path === "/console") {
        this.$router.push("/console/configuration/hotMessage/index");
      }
    },
    //点击注销
    logout() {
      outlogin()
        .then((res) => {
          //登出
          localStorage.removeItem("TOKEN");
          localStorage.removeItem("refreshToken");
          localStorage.removeItem("userInfo");
          localStorage.removeItem("permission");
          localStorage.removeItem("userType");
          this.$router.push("/login");
          this.$message.destroy();
          this.$message.success(res.msg);
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    // //更新列表
    // refreshLabelInput() {
    //   this.getUserInform();
    // },
    // //获取当前个人设置详情
    // getUserInform() {
    //   getUserInfo()
    //     .then((res) => {
    //       let data = res.data;
    //       this.informData = data;
    //       this.$store.commit("SET_USERINFO", { photo: data.photo});
    //     })
    //     .catch((err) => {
    //       this.$message.destroy();
    //       this.$message.error(err);
    //   });
    // },
    // saveFunc() {
    //   console.log("点击了确定");
    //   this.informVisible = false;
    //   localStorage.setItem("photo", this.photo);
    // },
    /*我的标签 */
    tagsClick() {
      this.tagsVisible = true;
      this.$message.success("点击了我的标签~");
    },
    saveFunc() {
      this.$message.success("点击了确定~");
      this.tagsVisible = false;
    },
    closeFunc() {
      alert("点击了取消");
    },
    //拖拽事件
    dragControllerDiv() {
      var resize = document.getElementsByClassName("resize");
      var left = document.getElementsByClassName("left-box");
      var right = document.getElementsByClassName("right-box");
      var box = document.getElementsByClassName("content");
      for (let i = 0; i < resize.length; i++) {
        //鼠标按下事件
        resize[i].onmousedown = (e) => {
          //颜色改变提醒
          // resize[i].style.background = "#bfbfbf";
          var startX = e.clientX; //拖拽x距离
          console.log("当前拖拽距离:", e.clientX);
          resize[i].left = resize[i].offsetLeft;
          this.boxWidth = box[i].clientWidth;
          //鼠标拖动事件
          document.onmousemove = (e) => {
            var endX = e.clientX;
            var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            this.moveLen = moveLen;
            var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
            if (moveLen < 420) moveLen = 420; // 左边区域的最小宽度为300px
            if (moveLen > maxT - 420) moveLen = maxT - 420; //右边区域最小宽度为300px
            resize[i].style.left = moveLen; // 设置左侧区域的宽度
            for (let j = 0; j < left.length; j++) {
              left[j].style.width = moveLen + "px";
              this.left = left[j].style.width;
              right[j].style.width = box[i].clientWidth - moveLen - 2 + "px";
              this.right = right[j].style.width;
            }
          };
          // 鼠标松开事件
          document.onmouseup = (e) => {
            //颜色恢复
            // resize[i].style.background = "#7C7C7C";
            document.onmousemove = null;
            document.onmouseup = null;
            resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          };
          resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false;
        };
        // resize[i].onmouseover = (e) => {
        //   resize[i].style.background = "#bfbfbf";
        // };
        // resize[i].onmouseout = (e) => {
        //   resize[i].style.background = "#7C7C7C";
        // };
      }
    },

    //文本仓库列表相关
    //编辑
    editText(record) {
      this.textVisible = false;
      this.flag = true;
      this.id = record.id;
    },
    //新增
    addText() {
      this.textVisible = false;
      this.flag = true;
      this.record = {
        id: "",
        titleName: "",
        content: "",
        upadteTime: "",
        status: 1,
      };
    },
    //富文本相关
    //返回
    ueditorBack() {
      this.textVisible = true;
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
    ...mapState(["isShowbackBtn"]),
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
.console
  height 100%
  position relative
  .ant-layout-header
    padding 0 20px
    height 164px
    background url('../assets/images/text-header-bg.png') no-repeat
    background-size cover
    font-size 16px !important
  .ant-menu-dark, .ant-menu-dark .ant-menu-sub
    background rgba(255, 255, 255, 0)
  .console-body
    height 100%
    .header-content
      position relative
      width 100%
      .header-logo
        position absolute
        left 30px
        top 15px
      .header-user
        position absolute
        right 15px
        top 15px
        img
          width 30px
          height 30px
          display inline-block
          border-radius 50%
          margin-right 5px
      .console-name
        h1
          font-size 28px
          color #fff
          text-align center
          margin-top 6px
          font-weight bold
          text-shadow 0 2px 9px #9cadbd
    .main-content
      position absolute
      top 88px
      left 50%
      transform translate(-50%, 0)
      width 98%
      background #ffffff
      border-radius 5px 5px 0 0
      height calc(100% - 88px)
      z-index 10
      .content
        display flex
        height 100%
        width 100%
        overflow hidden
        box-shadow -1px 9px 10px 3px rgba(0, 0, 0, 0.11)
        position absolute
        border-radius 5px 5px 0 0
        /* 左侧div样式 */
        .left-box
          width calc(50% - 5px) /* 左侧初始化宽度 */
          height 100%
          background #ffffff
          position relative
          .operation-btn
            position absolute
            right 30px
            top 5px
            font-size 20px
            cursor pointer
          .tags-header
            height 44px
            line-height 44px
            border-bottom 1px solid #ECECEC
            padding-left 20px
            margin-right 10px
            span
              cursor pointer
              margin-left 8px
              font-size 14px
              color #0f95d4
        /* 拖拽区div样式 */
        .resize
          position relative
          cursor col-resize
          background-color #9197b3
          width 1px
          height 100%
          // background-size cover
          background-position center
          /* z-index: 99999; */
          font-size 32px
        /* 拖拽区鼠标悬停样式 */
        .resize:hover
          background #9197b3
          width 6px
        .right-box
          width 50%
          height 100%
          background #ffffff
          position relative
          .operation-btn
            position absolute
            right 30px
            top 5px
            font-size 20px
            cursor pointer
          .text-header
            height 44px
            line-height 44px
            border-bottom 1px solid #ECECEC
            margin-left 10px
            span
              cursor pointer
              margin-left 8px
              font-size 14px
              color #333333
              font-weight 600
</style>
